<template>
	<view class="login-container">
		<!-- 背景装饰 -->
		<image src="/static/home/bgt.png" class="bg-decoration" mode=""></image>

		<!-- 顶部区域 -->
		<view class="top-section">
			<view class="logo-section">
				<text class="app-name">智小批批改系统</text>
				<text class="welcome-text">欢迎您的使用</text>
			</view>
		</view>

		<!-- 登录表单 -->
		<view class="form-container">
			<view class="form-title">账号登录</view>

			<!-- 手机号输入 -->
			<view class="input-group">
				<view class="input-label">手机号</view>
				<view class="input-wrapper">
					<image src="/static/login/phone.png" class="input-icon" mode=""></image>
					<input type="number" v-model="loginForm.phone" placeholder="请输入手机号" class="input-field"
						maxlength="11" />
				</view>
			</view>

			<!-- 密码输入 -->
			<view class="input-group">
				<view class="input-label">密码</view>
				<view class="input-wrapper">
					<image src="/static/login/lock.png" class="input-icon" mode=""></image>
					<input :password="!showPassword" v-model="loginForm.password" placeholder="请输入密码"
						class="input-field" maxlength="20" />
					<image :src="showPassword ? '/static/login/eye-open.png' : '/static/login/eye-close.png'"
						class="eye-icon" @tap="togglePassword" mode=""></image>
				</view>
			</view>

			<!-- 忘记密码 -->
			<view class="forgot-password">
				<text @tap="forgotPassword">去注册</text>
			</view>

			<!-- 登录按钮 -->
			<view class="login-btn" @tap="handleLogin" :class="{ disabled: isLoading }">
				<text class="login-btn-text">{{ isLoading ? '登录中...' : '登录' }}</text>
			</view>


		</view>

		<!-- 底部协议 -->
		<view class="agreement">
			<view class="agreement-line">
				<text class="agreement-text">登录即表示同意</text>
				<text class="agreement-link" @tap="showAgreement('privacy')">《隐私政策》</text>
				<text class="agreement-text">和</text>
				<text class="agreement-link" @tap="showAgreement('service')">《服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					password: ''
				},
				showPassword: false,
				isLoading: false
			}
		},
		methods: {
			// 切换密码显示
			togglePassword() {
				this.showPassword = !this.showPassword;
			},

			// 表单验证
			validateForm() {
				if (!this.loginForm.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'error'
					});
					return false;
				}

				if (!/^1[3-9]\d{9}$/.test(this.loginForm.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'error'
					});
					return false;
				}

				if (!this.loginForm.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'error'
					});
					return false;
				}



				return true;
			},

			// 处理登录
			async handleLogin() {
				if (this.isLoading) return;

				if (!this.validateForm()) return;

				this.isLoading = true;


				// 调用登录接口
				const n = await this.$api.loginPhone({
					phone: this.loginForm.phone,
					code: this.loginForm.password
				});

				if (n.code == '0000') {
					// 保存登录信息
					uni.setStorageSync('teacherName', n.data.teacherName)
					uni.setStorageSync('phone', n.data.phone)
					uni.setStorageSync('schoolId', n.data.schoolId)
					uni.setStorageSync('teacherId', n.data.teacherId)
					uni.setStorageSync('token', n.data.accessToken)
					uni.setStorageSync('refreshToken', n.data.refreshToken)

					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});

					// 跳转到首页或指定页面
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 1500);

				} else {
					this.isLoading = false
					this.$msg(n.info)

				}


			},

			// 微信登录
			wechatLogin() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('微信登录结果:', loginRes);
						// 这里可以调用微信登录接口
						uni.showToast({
							title: '微信登录功能开发中',
							icon: 'none'
						});
					},
					fail: (err) => {
						console.error('微信登录失败:', err);
						uni.showToast({
							title: '微信登录失败',
							icon: 'error'
						});
					}
				});
			},

			// 忘记密码
			forgotPassword() {
				uni.navigateTo({
					url: '/pages/login/form'
				})
			},

			// 显示协议
			showAgreement(type) {
				const title = type === 'privacy' ? '隐私政策' : '服务协议';
				uni.showToast({
					title: `${title}功能开发中`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #E4FAE1 0%, #FFFFFF 100%);
		position: relative;
		padding: 0 60rpx;
	}

	.bg-decoration {
		z-index: 1;
		position: fixed;
		right: 0;
		top: 10%;
		width: 400rpx;
		height: 330rpx;
		opacity: 0.6;
	}

	.top-section {
		padding-top: 40rpx;
		text-align: center;
		margin-bottom: 50rpx;
	}

	.logo-section {
		.logo {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 30rpx;
		}

		.app-name {
			display: block;
			font-size: 48rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 16rpx;
		}

		.welcome-text {
			display: block;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.form-container {
		position: relative;
		z-index: 9;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 40rpx;
	}

	.form-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.input-group {
		margin-bottom: 40rpx;
	}

	.input-label {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		background: #F8F9FA;
		border: 2rpx solid #E9ECEF;
		border-radius: 20rpx;
		padding: 0 30rpx;
		height: 88rpx;

		&:focus-within {
			border-color: #05C490;
			background: #FFFFFF;
		}
	}

	.input-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.input-field {
		flex: 1;
		font-size: 32rpx;
		color: #333333;
		background: transparent;

		&::placeholder {
			color: #999999;
		}
	}

	.eye-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.forgot-password {
		text-align: right;
		margin-bottom: 50rpx;

		text {
			font-size: 26rpx;
			color: #05C490;
		}
	}

	.login-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #05C490 0%, #1EDDAC 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 50rpx;

		&.disabled {
			opacity: 0.6;
		}
	}

	.login-btn-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #FFFFFF;
	}

	.other-login {
		text-align: center;
	}

	.other-text {
		font-size: 26rpx;
		color: #999999;
		margin-bottom: 30rpx;
		display: block;
	}

	.other-methods {
		display: flex;
		justify-content: center;
	}

	.method-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.method-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 16rpx;
	}

	.method-text {
		font-size: 24rpx;
		color: #666666;
	}

	.agreement {
		text-align: center;
		padding-bottom: 40rpx;
	}

	.agreement-line {
		font-size: 24rpx;
		color: #999999;
	}

	.agreement-link {
		color: #05C490;
		text-decoration: underline;
	}
</style>